<script lang="ts">
import {defineComponent, ref, PropType} from "vue"
import {SmstmpType} from "@/apps/admin/view/system/sms/SmsHook";
import {useCloseMessageBox} from "@/hooks/DialogMsg";
import {UpdateSmsTemplateDataApi} from "@/apps/admin/api/system/sms";
import {ElMessage} from "element-plus";

export default defineComponent({
  name: "SmsTemplateForm",
  emits: {
    success: () => true
  },
  props: {
    data: {
      type: Object as PropType<SmstmpType>,
      required: true
    }
  },
  setup(props, {emit}) {
    const model = ref({
      KEY: props.data.KEY,
      TEMPLATE_ID: props.data.TEMPLATE_ID,
      DESCRIPTION: props.data.DESCRIPTION,
      CONTENT: props.data.CONTENT,
      PARAM: props.data.PARAM
    })

    const close = useCloseMessageBox()

    function saveData() {
      UpdateSmsTemplateDataApi(model.value).then(result => {
        if (result.code === 200) {
          emit('success')
          close()
          ElMessage.success(result.msg)
        }
      })
    }

    return {
      model, saveData, close
    }
  }
})
</script>

<template>
  <el-form ref="form" :model="model" status-icon label-width="80px">
    <el-form-item label="调用名" prop="key">
      <el-input disabled v-model.trim="model.KEY" maxlength="30"/>
      <p class="app-form-create-hint">发送短信时的调用名称</p>
    </el-form-item>
    <el-form-item label="模板ID" prop="template_id">
      <el-input v-model.trim="model.TEMPLATE_ID" maxlength="50"/>
      <p class="app-form-create-hint">第三方短信服务商的模板ID,没有可以不填</p>
    </el-form-item>
    <el-form-item label="模板描述" prop="description">
      <el-input disabled v-model.trim="model.DESCRIPTION" maxlength="50"/>
      <p class="app-form-create-hint">对应服务商的模板ID,没有可以不填</p>
    </el-form-item>
    <el-form-item label="模板内容" class="is-required" prop="content">
      <el-input type="textarea" placeholder="请输入短信模板内容" v-model.trim="model.CONTENT" maxlength="150"/>
      <p class="app-form-create-hint">参数用大括号包裹,比如{code}</p>
    </el-form-item>
    <el-form-item label="可用参数" prop="content">
      <key-value disabled v-model="model.PARAM" keyplaceholder="参数名称" valplaceholder="参数描述"></key-value>
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="close">取消</el-button>
      <el-button type="primary" @click="saveData">保存</el-button>
    </el-form-item>
  </el-form>
</template>